<template>
  <scroll class="content-wrapper">
    <div class="content">
      <div class="baseInfoWrapper">
        <div class="baseInfo">
          <div class="top">
            <h1>{{seller.name}}</h1>
            <div class="ratingWrapper">
              <v-rating class="rating" :score="seller.score" :size="12" :height="18" :marginRight="4" ></v-rating>
              <span class="text">({{seller.ratingCount}})</span>
              <span class="text">月售{{seller.sellCount}}单</span>
            </div>
            <div class="collection">
              <i class="iconfont icon-aixin"></i>
              <div class="text">收藏</div>
            </div>
          </div>
          <ul class="bottom">
            <li class="left">
              <div class="title">起送价</div>
              <div>
                <span class="value">{{seller.minPrice}}</span>
                <span class="unit">元</span>
              </div>
            </li>
            <li class="mid">
              <div class="title">商家配送</div>
              <div>
                <span class="value">{{seller.deliveryPrice}}</span>
                <span class="unit">元</span>
              </div>
            </li>
            <li class="right">
              <div class="title">平均配送时间</div>
              <div>
                <span class="value">{{seller.deliveryTime}}</span>
                <span class="unit">元</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <splitter></splitter>
      <div class="bulletin">
        <h2>公告与活动</h2>
        <p>粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。</p>
      </div>
      <ul class="supports">
        <li v-for="support in seller.supports">
          <span class="icon" :class="classMap[support.type]"></span>
          <span class="desc">{{support.description}}</span>
        </li>
      </ul>
      <splitter></splitter>
      <div class="picsWrapper">
        <h2>商家实景</h2>
        <scroll class="picsWrapper2" :scrollX="true">
          <ul class="pics" ref="pics">
            <li v-for="pic in seller.pics">
              <img :src="pic">
            </li>
          </ul>
        </scroll>
      </div>
      <splitter></splitter>
      <div class="infos">
        <h2>商家信息</h2>
        <ul>
          <li v-for="info in seller.infos">{{info}}</li>
        </ul>
      </div>
    </div>
  </scroll>
</template>

<script>
    import {mapState, mapGetters,mapMutations, mapActions} from 'vuex'
    import scroll from './scroll.vue'
    import rating from './rating'
    import splitter from './splitter.vue'
    export default {
        components:{
          'scroll': scroll,
          'v-rating': rating,
          'splitter': splitter
      },
        data:function () {
            return {
              classMap: ['bg0', 'bg1','bg2','bg3','bg4']
            }
        },
        computed: {
          ...mapGetters(['seller']),
        },
        mounted: function(){
          this.$refs.pics.style.width = (this.seller.pics.length * 140 - 20) + 'px'
        },
        methods: {
        }
    }
</script>

<style lang="scss" scoped>
  @import "~assets/scss/mixin.scss";

  .content-wrapper{
    overflow: hidden;
    width: 100%;
    height: 100%;

    .content {
      .baseInfoWrapper {
        padding: 18px;

        .baseInfo {
          .top{
            position: relative;
            border-bottom: 1px solid rgba(7,17,27,0.1);
            padding-bottom: 18px;

            h1{
              margin-bottom: 8px;
              line-height: 14px;
              color: #07111b;
              font-size: 14px;
            }
            .ratingWrapper{
              .rating{
                vertical-align: top;
              }
              .text {
                vertical-align: top;
                line-height: 18px;
                font-size: 10px;

                margin-right: 12px;
              }
            }
            .collection{
              position: absolute;
              right: 0;
              top: 0;
              bottom: 0;

              color: #d4d6d9;
              text-align: center;

              .icon-aixin{
                line-height: 24px;
                font-size: 24px;

                display: block;
                margin-bottom: 4px;
              }
              .text{
                font-size: 18px;
                line-height: 18px;
              }
            }
          }
          .bottom{
            display: flex;
            padding: 18px 0 0;

            .left, .mid, .right{
              flex: 1;
              text-align: center;

              .title{
                margin-bottom: 4px;
                line-height: 10px;
                font-size: 10px;
                color: #939995;
              }

              .value{
                font-size: 24px;
                line-height: 1;
              }
              .unit{
                font-size: 12px;
                line-height: 1;
              }
            }
            .left, .mid{
              border-right: 1px solid rgba(7,17,27,0.1);
            }
          }
        }
      }

      .bulletin {
        padding: 18px;

        h2{
          margin-bottom: 8px;
          line-height: 14px;
          color: #07111b;
          font-size: 14px;
        }

        p{
          font-size: 16px;
          line-height: 24px;

          text-align: justify;
        }
      }
      .supports{
        padding: 0 18px;

        li{
          padding: 16px 12px;
          border-top: 1px solid rgba(7,17,27,0.1);

          .icon{
            display: inline-block;
            width: 16px;
            height: 16px;
            background-position: center;
            background-size: 100% 100%;
            vertical-align: top;
            margin-right: 6px;

            &.bg0 {
              @include bg-image('/static/images/0')
            }
            &.bg1 {
              @include bg-image('/static/images/1')
            }
            &.bg2 {
              @include bg-image('/static/images/2')
            }
            &.bg3 {
              @include bg-image('/static/images/3')
            }
            &.bg4 {
              @include bg-image('/static/images/4')
            }
          }
          .desc{
            display: inline-block;
            font-size: 12px;
            line-height: 16px;
            color: #07111b;
            vertical-align: top;
          }
        }
      }
      .picsWrapper{
        padding: 18px;

        h2{
          margin-bottom: 12px;
          line-height: 14px;
          color: #07111b;
          font-size: 14px;
        }

        .picsWrapper2 {
          width: 100%;
          overflow: hidden;

          .pics {
            white-space: nowrap;

            li {
              display: inline-block;
              margin-right: 20px;

              img {
                width: 120px;
                height: 120px;
              }
            }
          }
        }

      }
      .infos{
        padding: 18px;

        h2{
          margin-bottom: 12px;
          line-height: 14px;
          color: #07111b;
          font-size: 14px;
        }

        li{
          border-top: 1px solid rgba(7,17,27,0.1);

          padding: 16px 12px;
          font-size: 12px;
          line-height: 1;
        }
      }
    }
  }
</style>
